<template>
  <div class="detail-enterprise">
    <header class="add-header">
      <el-page-header content="查看详情" @back="$router.back()" />
    </header>

    <main class="add-main">
      <div class="form-container">
        <div class="title">车辆信息</div>

        <div class="form">
          <el-form label-width="100px">
            <el-form-item label="车主姓名">
              {{ formdata.personName }}</el-form-item>
            <el-form-item label="联系方式"> {{ formdata.phoneNumber }}</el-form-item>

            <el-form-item label="车牌号码">{{ formdata.carNumber }}</el-form-item>

            <el-form-item label="车辆品牌">{{ formdata.carBrand }}</el-form-item>

          </el-form>

        </div>

      </div>
      <div class="form-container">
        <div class="title">月卡缴费记录</div>

        <div class="table-container">
          <el-table
            :data="rechargeList"
            style="width: 100%"
            border
            empty-text="暂无数据"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              label="有效时间"
              width="280"
            >
              <template #default="{row}">
                {{ row.cardStartDate }} 至{{ row.cardEndDate }}
              </template>

            </el-table-column>

            <el-table-column
              label="支付金额"
              prop="paymentAmount"
            />

            <el-table-column
              label="支付方式"
              prop="paymentMethod"
            />

            <el-table-column
              prop="createTime"
              label="录入时间"
            />

            <el-table-column
              prop="createUser"
              label="办理人"
            />

          </el-table>

        </div>

      </div>

    </main>

  </div>

</template>

<script>
import { lookCardDetailAPI } from '@/api/card'
export default {
  data() {
    return {
      formdata: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: ''
      },
      rechargeList: []
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  async created() {
    // console.log(this.id)
    const { data } = await lookCardDetailAPI(this.id)
    console.log(data)
    this.formdata.personName = data.personName
    this.formdata.phoneNumber = data.phoneNumber
    this.formdata.carNumber = data.carNumber
    this.formdata.carBrand = data.carBrand
    this.rechargeList = data.rechargeList
  },
  methods: {

  }

}
</script>

      <style scoped lang="scss">
      .detail-enterprise {
        background-color: #f4f6f8;
        height: 100vh;

        .add-header {
          display: flex;
          align-items: center;
          padding: 0 20px;
          height: 64px;
          background-color: #fff;

          .left {
            span {
              margin-right: 4px;
            }
            .arrow{
              cursor: pointer;
            }
          }

          .right {
            text-align: right;
          }
        }

        .add-main {
          background: #f4f6f8;
          padding: 20px 130px;
          .form-container {
            background-color: #fff;
            .title {
              height: 60px;
              line-height: 60px;
              padding-left:20px;
            }
            .form {
              margin-bottom: 20px;
              padding: 20px 65px 24px;
              .el-form{
                display: flex;
                flex-wrap: wrap;
                .el-form-item{
                  width: 50%;
                }
              }
            }
          }

          .form-container {
            background-color: #fff;
            margin-bottom: 20px;
            .title {
              height: 60px;
              line-height: 60px;
              padding-left: 20px;
            }
          }
          .table-container{
            padding:20px;
          }
          .preview{
            img{
              width: 100px;
            }
          }
        }
      }
      </style>

